<template>
    <view :style="style" class="search-custom-component flex align-center">
        <view class="left" @tap="BackPage" :style="backStyle" v-if="isBack">
            <i class="cuIcon cuIcon-back"></i>
            <text v-if="backText">{{backText}}</text>
        </view>
        <view class="content flex-sub" @tap="handleInputClick">
            <view class="input_box flex align-center justify-start" v-if="focus">
                <view class="tlIcon-search"></view>
                <view class="flex-sub">
                    <input class="input_search" v-model="search" :focus="focus" type="search"
                           :disabled="disabled" :placeholder="placeholder"
                           placeholder-class="input-placeholder" :class="{'show_input':focus}"
                           @confirm="_emit" @input="_emit" @blur="handleBlur" confirm-type="search"/>
                </view>
            </view>

            <view class="azm-scc-input flex align-center justify-start" @tap="handleOpenInput" v-else>
                <view v-if="search">{{search}}</view>
                <block v-else>
                    <view class="tlIcon-search"/>
                    <view class="input-placeholder">{{placeholder}}</view>
                </block>
            </view>
        </view>
        <view class="right" :style="rightStyle">
            <slot name="right"></slot>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        name: 'cu-custom',
        data () {
            return {
                focus: false,
                search: '',
                rightStyle: '',
                //#ifdef MP-WEIXIN
                Custom: {},
                //#endif
            };
        },
        computed: {
            ...mapState({
                systemInfo: state => state.User.systemInfo
            }),
            backStyle () {
                //#ifdef MP-WEIXIN
                const {object2style} = this.$util;
                const {Custom, windowWidth} = this.systemInfo;
                let l = windowWidth - Custom.right;
                this.Custom = Custom;
                this.rightStyle = object2style({
                    width: (Custom.width + l) + 'px',
                    paddingRight: l + 'px'
                });
                return object2style({
                    width: (Custom.width + l) + 'px',
                    paddingLeft: l + 'px'
                })
                //#endif
            },
            style () {
                // const {object2style} = this.$util;
                // const {CustomBar, Custom} = this.systemInfo;
                // this.CustomBar = CustomBar;
                // this.Custom = Custom;
                // return object2style({height: CustomBar + 'px'})
            },
        },
        props: {
            disabled: {
                type: Boolean,
                default: false
            },
            placeholder: String,
            backText: String,
            bgColor: {
                type: String,
                default: ''
            },
            isBack: {
                type: [Boolean, String],
                default: false
            },
            isUnderline: Boolean,
            isCustom: {
                type: [Boolean, String],
                default: false
            },
        },
        methods: {
            BackPage () {
                this.isBack && this.$emit('backing-out')
            },
            toHome () {
                this.$emit('to-home')
            },
            handleOpenInput () {
                if (!this.disabled) this.focus = true
            },
            handleBlur (e) {
                this.focus = false;
                this._emit(e)
            },
            handleInput (e) {
                console.log(e);
                this.$emit("input", e)
            },
            handleConfirm (e) {
                this.$emit('confirm', e)
            },
            _emit (e, t) {
                // console.log(e, '+++++++search_custom++++++++');
                const type = t || e.type;
                this.$emit(`search_${type}`, e)
            },
            handleInputClick (e) {
                if (this.disabled === true) {
                    this._emit(e, 'tap')
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .search-custom-component {
        width: 100vw;
        height: 100%;

        .left, .right {
            min-width: 75*2upx;
        }

        .right {
            padding-right: 10px;
        }

        .left {
            padding-left: 10px;
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: flex-start;
            max-width: 100%;
            cursor: pointer;

            .text {
                display: block;

                &:not(.cuIcon) {
                    flex: 1;
                    font-size: 14*2upx;
                    padding-left: 3*2upx;
                }
            }

            .cuIcon {
                width: 16*2upx;
                font-size: 16*2upx;
            }
        }

        .content {
            padding-left: 15*2upx;
            padding-right: 15*2upx;
            text-align: center;
            font-size: 16*2upx;

            .tlIcon-search {
                padding-right: 5*2upx;
                font-size: 18*2upx;
                color: $tl-text-color-placeholder;
            }

            .input_box, .azm-scc-input {
                background-color: #F5F5F5;
                border-radius: 16*2upx;
                height: 32*2upx;
                font-size: 13*2upx;
                padding: 0 15*2upx;
                letter-spacing: 1*2rpx;
            }

            .input_box {
                //position: fixed;
                //top: -1000px;
                .input_search {
                    font-size: inherit;
                    text-align: left;
                    line-height: 1;
                    min-height: 1em;

                    &.show_input {
                        position: relative;
                        top: auto;
                    }
                }
            }

            .azm-scc-input {
                text-align: left;
            }
        }
    }

    .input-placeholder {
        font-weight: 400;
    }
</style>
